<!DOCTYPE html>
<html class="demo" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./js/validator/jquery.validator.css">
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/validator/jquery.validator.js"></script>
<script type="text/javascript" src="./js/validator/local/zh_CN.js"></script>
<style type="text/css">
.signup {
	padding: 20px 0;
}

.field-name {
	height: 18px;
	line-height: 18px;
	margin-bottom: 3px;
	font-size: 14px;
	font-weight: bold;
	color: #333;
}

.field-input {
	position: relative;
	margin-bottom: 15px;
	line-height: 18px;
}

.field-input input {
	width: 382px;
	border-radius: 3px;
	font-size: 14px;
}

.btn-submit {
	position: relative;
	left: 0px;
	width: 392px;
	padding: 7px 0;
	color: #333;
	font-weight: bold;
	background-color: #ffec46;
	background-repeat: repeat-x;
	background-image: -webkit-linear-gradient(#ffec46, #fa2);
	background-image: -moz-linear-gradient(#ffec46, #fa2);
	background-image: -ms-linear-gradient(#ffec46, #fa2);
	background-image: -o-linear-gradient(#ffec46, #fa2);
	background-image: linear-gradient(#ffec46, #fa2);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec46',
		endColorstr='#ffaa22', GradientType=0);
	border-color: #fd9d00;
	text-shadow: none;
}

.btn-submit:hover {
	background-color: #fa2;
	background-image: -webkit-linear-gradient(#ffec46, #f09600);
	background-image: -moz-linear-gradient(#ffec46, #f09600);
	background-image: -ms-linear-gradient(#ffec46, #f09600);
	background-image: -o-linear-gradient(#ffec46, #f09600);
	background-image: linear-gradient(#ffec46, #f09600);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec46',
		endColorstr='#f09600', GradientType=0);
	border-color: #ed9200;
}
</style>
<script type="text/javascript">
	window.$ && $(function() {
		//注册表单验证失败的事件
		$('#signup_form').on('invalid.form', function() {
			//按钮动画效果
			$('#btn-submit').stop().delay(100).animate({
				left : -5
			}, 100).animate({
				left : 5
			}, 100).animate({
				left : -4
			}, 100).animate({
				left : 4
			}, 100).animate({
				left : -3
			}, 100).animate({
				left : 0
			}, 100);
		});
	});
</script>
</head>
<body>
	<div class="main">
		<div class="demo_html">
			<form id="signup_form" class="signup"
				data-validator-option="{stopOnError:true,timely:2}"
				action="results.php" method="post" target="_blank">
				<fieldset>
					<div class="form-item">
						<div class="field-name">全名</div>
						<div class="field-input">
							<input type="text" name="user[name]" maxlength="20"
								autocomplete="off" data-rule="required" data-tip="输入你的名字与姓氏。"
								data-ok="名字很棒。" data-msg-required="全名必填!">
						</div>
					</div>

					<div class="form-item">
						<div class="field-name">电子邮件地址</div>
						<div class="field-input">
							<input type="text" name="user[email]" autocomplete="off"
								data-rule="required;email;remote[check/email.php]"
								data-tip="你的邮件地址是什么?" data-ok="我们将会给你发送确认邮件。"
								data-msg-required="电子邮箱地址必填!" data-msg-email="不像是有效的电子邮箱。">
						</div>
					</div>

					<div class="form-item">
						<div class="field-name">创建密码</div>
						<div class="field-input">
							<input type="password" name="user[user_password]"
								data-rule="required;length[6~];password;strength;"
								data-tip="6个或更多字符! 要复杂些。" data-ok="" data-msg-length="密码最少为6位。"
								data-msg-required="密码不能为空!">
						</div>
					</div>

					<div class="form-item">
						<div class="field-name">选择你的用户名</div>
						<div class="field-input">
							<input type="text" name="user[screen_name]" maxlength="15"
								autocomplete="off"
								data-rule="required;username;remote[check/user.php]"
								data-rule-username="[/^[a-zA-Z0-9]+$/, '用户名无效! 仅支持字母与数字。']"
								data-tip="别担心,你可以稍后进行修改。" data-ok="用户名可以使用。<br>你可以稍后进行修改。"
								data-msg-required="用户名必填!<br>你可以稍后进行修改。">
						</div>
					</div>
				</fieldset>
				<button id="btn-submit" class="btn-submit" type="submit">创建我的账号</button>
			</form>
		</div>
	</div>
</body>
</html>